<!DOCTYPE html>

<head>

	<title>jsPDF png test</title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="">

	<script src='js/jquery/jquery-1.7.1.min.js' type='text/javascript'></script>
	<script src='../dist/jspdf.debug.js' type='text/javascript'></script>

	<style>
		body {
			background-image: url("images/grid.png");
		}

		div {
			min-width: 300px;
			float: left;
			clear: left;
		}

		.img-wrap {
			margin-bottom: 20px;
			float: left;
		}

		input[type=button] {
			margin-bottom: 5px;
			float: left;
			clear: left;
		}
	</style>

</head>

<body>

	<script type="text/javascript">

		var images = {
			jpg: '',
			colortype_6_rgba_8_bit_png: '',
			colortype_6_rgba_16_bit_png: '',
			colortype_4_grayscale_alpha_8_bit_png: '',
			colortype_4_grayscale_alpha_16_bit_png: '',
			colortype_3_indexed_single_colour_alpha_8_bit_png: '',
			colortype_3_indexed_multi_colour_alpha_8_bit_png: '',
			//colortype_3_indexed_single_colour_alpha_4_bit_png: '',
			//colortype_3_indexed_multi_colour_alpha_4_bit_png: '',	
			colortype_2_rgb_8_bit_png: '',
			colortype_2_rgb_16_bit_png: '',
			colortype_1_grayscale_8_bit_png: ''
		}

		var btns = {
			base64: { label: 'Generate pdf from base64', compress: 'none' },
			img: { label: 'Generate pdf from <img> and recompress', compress: 'slow' },
			compress_fast: { label: 'Generate pdf from base64 and fast recompress image', compress: 'fast' },
			compress_med: { label: 'Generate pdf from base64 and medium recompress image', compress: 'medium' },
			compress_slow: { label: 'Generate pdf from base64 and slow recompress image', compress: 'slow' }
		}


		$(document).ready(function () {

			$('<div>', {
				id: 'container'
			}).appendTo('body');

			var select = $('<select>', {
				change: function (evt) {
					displayImage($(this).val());
				}
			}).appendTo('body');

			var img;

			for (img in images) {

				$('<option>', {
					text: img.replace(/_/g, " "),
					value: img,
				}).appendTo(select);

			}

			displayImage('jpg');
		});


		function displayImage(id) {

			var container = $('#container').empty();

			var imgWrap = $('<div>', {
				class: 'img-wrap'
			}).appendTo(container);

			var img = $('<img>', {
				id: id,
				src: images[id]
			}).appendTo(imgWrap);

			var label = id.replace(/_/g, " "),
				format = label.split(" ").pop(),
				btn,
				data;

			for (btn in btns) {

				if (btn.indexOf('compress') === 0)
					if (id.indexOf("colortype_6") === -1 && id.indexOf("colortype_4") === -1)
						continue;

				data = btn === 'img' ? img.get(0) : images[id];

				$('<input>', {
					type: 'button',
					value: btns[btn].label,
					click: (function (btn, data) {
						return function (evt) {
							var type = btn.replace(/_/g, " ")
							createPDFObject(data, label + " " + type, format, btns[btn].compress);
						}
					})(btn, data)
				}).appendTo(container);
			}
		}

		function createPDFObject(imgData, type, format, compress) {

			var doc = new jsPDF('p', 'pt', 'a4', false);

			doc.setFontSize(40);
			doc.setDrawColor(0);
			doc.setFillColor(238, 238, 238);
			doc.rect(0, 0, 595.28, 841.89, 'F');
			doc.text(35, 100, type);
			doc.addImage(imgData, format, 100, 200, 280, 210, undefined, compress);

			doc.save(type + '.pdf')
		}

	</script>

</body>

</html>